:root {
    --base-bg-color: #fff;
    --header-bg-color: #fff;
    --link-color: #52616a;
    --header-text-color: #252c41;
    --header-link-color: #252c41;
    --toc-active-color: #dddfe6;
    --base-hover-color: #f1404b;
    --base-hl-color: #f1404b;
    --page-text-color: #fff;
    --cover-no-img-bg: #fff;
    --cover-default-bg: #101012;
    --menu-btn-color: #52616a;
    --header-sub-bg-color: #f0f5f9;
    --header-sub-hover-bg-color: #c9d6de;
    --base-color: #4facfe;
    --cd-hover-color: #E53A40;
    --btn-pri-bg-color: #E53A40;
    --base-txt-color: #363636;
    /*--btn-pri-bg-color: #ff5f5f;*/
    --text-color: #333333;
    --text-hover-color: #4facfe;
    --toc-bg-color: #8e8787;
    /*夜晚默认*/
    --night-toc-bg-color: #e5e5e5;
    --night-tag-txt-color: #e5e5e5;
    --night-tag-bg-color: #555;
    --night-link-card-bg-color: rgba(0, 0, 0, .4);
    --night-background: #292a2d;
    --night-txt-color: #a9a9b3;
    --night-input-backgrround: #2d2d2d;
    --night-code-txt-color: #c5c8c6;
    --night-code-color: #969896;
    --night-code-bg-color: #2d2d2d;
    --night-code-hljs-string-color: #0857b3;
    --night-page-a-color: #fff;
    --monospace: "Lucida Console", Consolas, "Courier", monospace;
    --night-nav-list:rgba(41,42,45,1);
}

* {
    padding: 0;
    margin: 0;
    /*cursor: url(../image/normal.cur), auto!important;*/
}

ul li {
    list-style: none;
}

a,
img {
    text-decoration: none;
    border: none;
}

.night {
    background-color: var(--night-background);
    color: var(--night-txt-color)!important
}

.night .editormd-html-preview {
    /*padding: 20px 40px;*/
    background-color: var(--night-background)!important;
    /*border: 1px solid rgba(30, 35, 42, .06);*/
    /*box-shadow: 0 4px 10px 10px rgb(0 0 0 / 5%);*/
}

.night .markdown-body {
    color: var(--night-txt-color)!important;
}

.editormd-html-preview {
    /*padding: 20px 40px;*/
    background-color: var(--base-bg-color)!important;
    /*border: 1px solid rgba(30, 35, 42, .06);*/
    /*box-shadow: 0 4px 10px 10px rgb(0 0 0 / 5%);*/
}

.blog-header {
    width: 100%;
    min-height: 60px;
    position: fixed;
    background-color: rgba(255, 255, 255, 1);
    z-index: 11002;
    top: 0;
    left: 0;
    /*border-bottom: 1px solid #e8e9e7;*/
    font-size: 14px;
}

.night .blog-header {
    width: 100%;
    min-height: 60px;
    position: fixed;
    background-color: var(--night-background);
    z-index: 11002;
    top: 0;
    left: 0;
    font-size: 14px;
}

.container-fixed,
.blog-footer-fixed,
.blog-header-fixed {
    width: 1280px;
    margin-left: auto;
    margin-right: auto;
    position: relative
}

.blog-header-inner {
    margin-left: 10px;
    margin-right: 10px;
    position: relative
}

.header-logo {
    font-family: BarbaraHand;
    font-size: 40px;
    color: #444647;
    text-align: center;
    position: absolute;
    left: 0
}

.night .nav-list {
    display: block;
    background: var(--night-nav-list);
    position: absolute;
    /*left: 10%*/
}

.nav-list {
    display: block;
    position: absolute;
    left: 10%
}

.nav-list li {
    display: block;
    float: left;
    margin: 10px 5px;
    position: relative
}

.nav-list li:before {
    width: 0;
    height: 2px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    background-color: #c30d0d;
    content: "";
    transition: all .6s;
    z-index: -1
}

.nav-list li a {
    display: block;
    line-height: 32px;
    padding: 4px 28px;
    color: #212220;
    font-weight: 400;
    font-size: 15px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
    -webkit-transition: all .2s;
    transition: all .2s
}

.night .nav-list li a {
    display: block;
    line-height: 32px;
    padding: 4px 28px;
    color: var(--night-txt-color);
    font-weight: 400;
    font-size: 15px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
    -webkit-transition: all .2s;
    transition: all .2s
}

.nav-list .current:before {
    width: 100%;
    left: 0
}

.nav-list .current a {
    color: #c30d0d
}

.blog-skin {
    position: absolute;
    line-height: 60px;
    font-size: 24px
}

.blog-skin>img {
    border-radius: 50%;
    width: 40px;
    height: 40px
}

.phone-menu {
    width: 50px;
    height: 50px;
    display: inline-block;
    position: absolute;
    cursor: pointer;
    left: 0;
    top: 5px
}

.phone-menu i {
    background: #787977;
    display: inline-block;
    width: 22px;
    height: 2px;
    position: absolute;
    left: 14px
}

.phone-menu i:nth-of-type(1) {
    top: 18px
}

.phone-menu i:nth-of-type(2) {
    top: 25px
}

.phone-menu i:nth-of-type(3) {
    top: 32px
}

.blog-footer {
    /*background-color: #212220;*/
    /*color: #919290;*/
    font-size: 14px;
    /*padding: 20px 0 0 0;*/
    position: relative;
    zoom: 1;
    clear: both;
    line-height: 20px;
    margin-top: 40px;
    overflow: hidden;
    border-top: 1px solid rgba(30, 35, 42, .06);
    box-shadow: 0 4px 10px 10px rgb(0 0 0 / 5%);
}

.blog-copyright {
    padding: 10px 0 10px 0
}

.blog-copyright .blog-footer-info {
    position: relative;
    text-align: center
}

.blog-copyright p {
    color: #565755;
    font-size: 13px
}

.blog-copyright .blog-footer-contact {
    margin: 20px 0;
}

.blog-copyright .blog-footer-contact a {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, .2);
    text-align: center;
    line-height: 30px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
    font-size: 14px;
    margin-left: 15px;
    margin-right: 0;
    border-radius: 100%;
    text-decoration: none;
    color: rgba(255, 255, 255, .5);
    -webkit-transition: all .3s;
    transition: all .3s
}

.blog-copyright .blog-footer-contact a:hover {
    color: #fff
}

.blog-copyright .blog-footer-contact .github:hover {
    background-color: #b952c5
}

.blog-copyright .blog-footer-contact .qq:hover {
    background-color: #d25744
}

.blog-copyright .blog-footer-contact .email:hover {
    background-color: #668f20
}

.blog-copyright .blog-footer-contact .weixin:hover {
    background-color: #06a2c9
}

.blog-copyright blog-footer-info p {
    margin-top: 5px;
}



@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(359deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(359deg)
    }
}


@font-face {
    font-family: BarbaraHand;
    src: url(../font/barbarahand-webfont.eot);
    src: url(../font/barbarahand-webfont.eot?#iefix) format('embedded-opentype'), url(../font/barbarahand-webfont.woff2) format('woff2'), url(../font/barbarahand-webfont.woff) format('woff'), url(../font/barbarahand-webfont.ttf) format('truetype'), url(../font/barbarahand-webfont.svg#BarbaraHand) format('svg');
    font-weight: 400;
    font-style: normal
}

.day-switch{
    position: absolute;
    right: 10%;
}

.day-night-switch {
    display: inline-block;
    z-index: 3;
    opacity: .65;
    width: 52px;
    height: 30px;
    padding: 20px 12px 18px 12px
}

.day-night-switch .onOff {
    background: #324164;
    width: 60px;
    height: 20px;
    z-index: 5;
    border-radius: 25px;
    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .1);
    border: 2px solid #1e2d50;
    overflow: hidden;
    position: relative
}

.day-night-switch .onOff * {
    transition: all .4s ease
}

.day-night-switch .onOff.daySwitch {
    border: 2px solid #52a6bf
}

.day-night-switch .onOff.daySwitch .sky {
    width: 65px;
    height: 25px;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(0, 0);
    -webkit-animation: none!important;
    animation: none!important
}

.day-night-switch .onOff.daySwitch .sunMoon {
    background: #ffdf61;
    border: 2px solid #d9b31c;
    left: calc(100% - 23px)
}

.day-night-switch .onOff.daySwitch .sunMoon .crater {
    transform: scale(0)!important
}

.day-night-switch .onOff.daySwitch .sunMoon .cloud {
    opacity: 1;
    transform: translatex(0);
    transition-delay: .2s;
    -webkit-animation: cloudAnim 2.5s linear infinite;
    animation: cloudAnim 2.5s linear infinite
}

.day-night-switch .onOff .sunMoon {
    background: #f0e1a5;
    height: 15px;
    width: 15px;
    border-radius: 100%;
    border: 2px solid #ccc091;
    position: absolute;
    left: 3px;
    top: 0.5px
}

.day-night-switch .onOff .sunMoon .crater {
    background: #ccc091;
    width: 5px;
    height: 5px;
    border-radius: 13px;
    position: absolute;
    left: 50%;
    top: 20%
}

.day-night-switch .onOff .sunMoon .crater.crater1 {
    left: 30%;
    top: 45%;
    transform: scale(.5)
}

.day-night-switch .onOff .sunMoon .crater.crater2 {
    left: 55%;
    top: 60%;
    transform: scale(.7)
}

.day-night-switch .onOff .sunMoon .cloud {
    background: #fff;
    border-radius: 3px;
    position: absolute;
    opacity: 0;
    transform: translatex(-20px);
    transition-delay: 0s
}

.day-night-switch .onOff .sunMoon .cloud.part1 {
    width: 20px;
    height: 2px;
    left: -12px;
    top: calc(50% - 1.5px)
}

.day-night-switch .onOff .sunMoon .cloud.part1:before {
    content: "";
    background: #fff;
    border-radius: 3px;
    position: absolute;
    width: 3px;
    height: 3px;
    left: 40%;
    top: -100%
}

.day-night-switch .onOff .sunMoon .cloud.part1:after {
    content: "";
    background: #fff;
    border-radius: 3px;
    position: absolute;
    width: 15px;
    height: 2px;
    left: 20%;
    top: -200%
}

.day-night-switch .onOff .sunMoon .cloud.part2 {
    width: 3px;
    height: 3px;
    left: -1px;
    top: calc(50% + .3px)
}

.day-night-switch .onOff .sunMoon .cloud.part2:before {
    content: "";
    background: #fff;
    border-radius: 3px;
    position: absolute;
    width: 18px;
    height: 2px;
    left: -8px;
    top: 100%
}

.day-night-switch .onOff .star {
    background: #5ebedb;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translate(20px, 5px)
}

.day-night-switch .onOff .star.star1 {
    transform: translate(10px, 15px) scale(.3);
    -webkit-animation: starAnim1 3s -2.4s linear infinite;
    animation: starAnim1 3s -2.4s linear infinite
}

.day-night-switch .onOff .star.star2 {
    transform: translate(15px, -7px) scale(.6);
    -webkit-animation: starAnim2 3s -1.1s linear infinite;
    animation: starAnim2 3s -1.1s linear infinite
}

.day-night-switch .onOff .star.star3 {
    transform: translate(35px, -12px) scale(.9);
    -webkit-animation: starAnim3 3s -1.5s linear infinite;
    animation: starAnim3 3s -1.5s linear infinite
}

.day-night-switch .onOff .star.star4 {
    transform: translate(30px, 12px) scale(.4);
    -webkit-animation: starAnim4 3s -1.9s linear infinite;
    animation: starAnim4 3s -1.9s linear infinite
}

.day-night-switch .onOff .star.star5 {
    transform: translate(0, 0) scale(.6);
    -webkit-animation: starAnim5 3s -2.8s linear infinite;
    animation: starAnim5 3s -2.8s linear infinite
}

.day-night-switch .onOff .star.sky {
    -webkit-animation: skyAnim 3s -.4s linear infinite;
    animation: skyAnim 3s -.4s linear infinite
}

@-webkit-keyframes starAnim1 {
    0% {
        transform: translate(5px, 30px) scale(.3)
    }
    20% {
        transform: translate(8px, 17px) scale(.3)
    }
    50% {
        transform: translate(10px, 0) scale(.3)
    }
    80% {
        transform: translate(8px, -17px) scale(.3)
    }
    100% {
        transform: translate(5px, -30px) scale(.3)
    }
}

@keyframes starAnim1 {
    0% {
        transform: translate(5px, 30px) scale(.3)
    }
    20% {
        transform: translate(8px, 17px) scale(.3)
    }
    50% {
        transform: translate(10px, 0) scale(.3)
    }
    80% {
        transform: translate(8px, -17px) scale(.3)
    }
    100% {
        transform: translate(5px, -30px) scale(.3)
    }
}

@-webkit-keyframes starAnim2 {
    0% {
        transform: translate(10px, 30px) scale(.6)
    }
    20% {
        transform: translate(13px, 17px) scale(.6)
    }
    50% {
        transform: translate(15px, 0) scale(.6)
    }
    80% {
        transform: translate(13px, -17px) scale(.6)
    }
    100% {
        transform: translate(10px, -30px) scale(.6)
    }
}

@keyframes starAnim2 {
    0% {
        transform: translate(10px, 30px) scale(.6)
    }
    20% {
        transform: translate(13px, 17px) scale(.6)
    }
    50% {
        transform: translate(15px, 0) scale(.6)
    }
    80% {
        transform: translate(13px, -17px) scale(.6)
    }
    100% {
        transform: translate(10px, -30px) scale(.6)
    }
}

@-webkit-keyframes starAnim3 {
    0% {
        transform: translate(30px, 30px) scale(.9)
    }
    20% {
        transform: translate(33px, 17px) scale(.9)
    }
    50% {
        transform: translate(35px, 0) scale(.9)
    }
    80% {
        transform: translate(33px, -17px) scale(.9)
    }
    100% {
        transform: translate(30px, -30px) scale(.9)
    }
}

@keyframes starAnim3 {
    0% {
        transform: translate(30px, 30px) scale(.9)
    }
    20% {
        transform: translate(33px, 17px) scale(.9)
    }
    50% {
        transform: translate(35px, 0) scale(.9)
    }
    80% {
        transform: translate(33px, -17px) scale(.9)
    }
    100% {
        transform: translate(30px, -30px) scale(.9)
    }
}

@-webkit-keyframes starAnim4 {
    0% {
        transform: translate(25px, 30px) scale(.4)
    }
    20% {
        transform: translate(28px, 17px) scale(.4)
    }
    50% {
        transform: translate(30px, 0) scale(.4)
    }
    80% {
        transform: translate(28px, -17px) scale(.4)
    }
    100% {
        transform: translate(25px, -30px) scale(.4)
    }
}

@keyframes starAnim4 {
    0% {
        transform: translate(25px, 30px) scale(.4)
    }
    20% {
        transform: translate(28px, 17px) scale(.4)
    }
    50% {
        transform: translate(30px, 0) scale(.4)
    }
    80% {
        transform: translate(28px, -17px) scale(.4)
    }
    100% {
        transform: translate(25px, -30px) scale(.4)
    }
}

@-webkit-keyframes starAnim5 {
    0% {
        transform: translate(0, 30px) scale(.6)
    }
    20% {
        transform: translate(3px, 17px) scale(.6)
    }
    50% {
        transform: translate(5px, 0) scale(.6)
    }
    80% {
        transform: translate(3px, -17px) scale(.6)
    }
    100% {
        transform: translate(0, -30px) scale(.6)
    }
}

@keyframes starAnim5 {
    0% {
        transform: translate(0, 30px) scale(.6)
    }
    20% {
        transform: translate(3px, 17px) scale(.6)
    }
    50% {
        transform: translate(5px, 0) scale(.6)
    }
    80% {
        transform: translate(3px, -17px) scale(.6)
    }
    100% {
        transform: translate(0, -30px) scale(.6)
    }
}

@-webkit-keyframes skyAnim {
    0% {
        transform: translate(15px, 30px) scale(1)
    }
    20% {
        transform: translate(18px, 17px) scale(1)
    }
    50% {
        transform: translate(20px, 0) scale(1)
    }
    80% {
        transform: translate(18px, -17px) scale(1)
    }
    100% {
        transform: translate(15px, -30px) scale(1)
    }
}

@keyframes skyAnim {
    0% {
        transform: translate(15px, 30px) scale(1)
    }
    20% {
        transform: translate(18px, 17px) scale(1)
    }
    50% {
        transform: translate(20px, 0) scale(1)
    }
    80% {
        transform: translate(18px, -17px) scale(1)
    }
    100% {
        transform: translate(15px, -30px) scale(1)
    }
}

@-webkit-keyframes cloudAnim {
    0% {
        transform: translatex(0)
    }
    14% {
        transform: translatex(5px)
    }
    56% {
        transform: translatex(-10px)
    }
    100% {
        transform: translatex(0)
    }
}

@keyframes cloudAnim {
    0% {
        transform: translatex(0)
    }
    14% {
        transform: translatex(5px)
    }
    56% {
        transform: translatex(-10px)
    }
    100% {
        transform: translatex(0)
    }
}


@media screen and  (min-width: 1200px){

    .page2 {
        /*width: 1170px;*/
        width: 50%;
    }

    .blog-skin {
        right: 0
    }
    /*.nav-list {
        display: block!important
    }*/

    .container-fixed,
    .blog-footer-fixed,
    .blog-header-fixed {
        width: 90%
    }
    .phone-menu {
        display: none
    }
    .nav-list {
        display: block
    }


}
@media screen and (min-width: 992px) and (max-width: 1199px){
    .blog-skin {
        right: 0
    }
    /*.nav-list {
        display: block!important
    }*/

    .container-fixed,
    .blog-footer-fixed,
    .blog-header-fixed {
        width: 90%
    }
    .phone-menu {
        display: none
    }
    .nav-list {
        display: block
    }
}

@media screen and  (max-width: 991px){
    .blog-skin {
        right: 0
    }
    /*.nav-list {
        display: block!important
    }*/

    .container-fixed,
    .blog-footer-fixed,
    .blog-header-fixed {
        width: 90%
    }
    .phone-menu {
        display: none
    }
    .nav-list {
        display: block
    }
}
@media screen and (max-width: 768px){

    .header-logo {
        left: 25%;
        width: 50%
    }
    .nav-list {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0
    }
    .night .nav-list{
        position: fixed;
        top: 60px;
        left: 0;
        right: 0
    }
    .container-fixed,
    .blog-footer-fixed,
    .blog-header-fixed {
        width: 90%
    }
    .phone-menu {
        display: block
    }
    .nav-list {
        display: none;
        width: 100%;
        background: rgba(255, 255, 255, 1)
    }
    .night .nav-list {
        display: none;
        width: 100%;
        background: rgba(41, 42, 45, 1)
    }
    .nav-list li:before {
        bottom: 0;
        z-index: 10
    }
    .nav-list li {
        float: none;
        border-bottom: 1px solid #e8e9e7
    }
    .nav-list li:last-child {
        border: 0
    }

    .day-night-switch {
        right: 40px
    }
    .day-switch{
        right: 0px;
    }
}

@media screen and (max-width: 480px){
    .header-logo {
        left: 25%;
        width: 50%
    }
    .nav-list {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0
    }
    .night .nav-list {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0
    }
    .container-fixed,
    .blog-footer-fixed,
    .blog-header-fixed {
        width: 90%
    }
    .phone-menu {
        display: block
    }
    .nav-list {
        display: none;
        width: 100%;
        background: rgba(255, 255, 255, 1)
    }
    .night .nav-list {
        display: none;
        width: 100%;
        background: rgba(41, 42, 45, 1)
    }
    .nav-list li:before {
        bottom: 0;
        z-index: 10
    }
    .nav-list li {
        float: none;
        border-bottom: 1px solid #e8e9e7
    }
    .nav-list li:last-child {
        border: 0
    }

    .day-night-switch {
        right: 40px
    }
    .day-switch{
        right: 0px;
    }
}
.lolijump{
    position: fixed;
    height: 60px;
    width: 60px;
    right: 15px;
    bottom: 40px;
    z-index: 999;
}
.lolijump img{
    width: 100%;
}